<template>
  <div class="home">
    <div class="save-wrap">
      <el-button size="small" @click="savePageJson">保存当前页面</el-button>
    </div>
    <!-- 手机尺寸 -->
    <div class="el-rows">
      <div class="left-contt" v-if="allPageData.length">
        <aside-menu :path="path" ></aside-menu>
      </div>
      <div class="right-con">
        <div class="phone-wrap">
          <el-dropdown @command="optinPageSize">
            <span class="el-dropdown-link">
              <div class="size-wrap">
                {{phoneSize.name}} ({{phoneSize.width}}-{{phoneSize.height}})<i class="el-icon-arrow-down el-icon--right"></i>
              </div>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="item" v-for="(item,index) in phoneSizes" :key="index">{{item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 视图部分 -->
          <div class="view-section">
            <section :style="`width: ${phoneSize.width};background: ${bgColor};min-height: ${phoneSize.height}`">
              <!-- 店铺内容区 -->
              <div class="content-wrap">
                <draggable
                  class="syllable_ul"
                  :move="onMove"
                  filter=".forbid"
                  :preventOnFilter="false"
                  chosenClass="chosen"
                  element="div"
                  delay="30"
                  v-model="CurriculumScheduleData"
                  :animation="200"
                  :force-fallback="true" 
                >
                  <transition-group>
                    
                    <div v-for="(item,index) in CurriculumScheduleData" 
                      :key="item.id" 
                      :class="[item.activeBorder ? 'bordered': '', 'item',(item.forbid || eidtMode == 1) ? 'forbid' : 'mover']" 
                      @click="optionItemHadle(item.id)"
                    >
                      <!-- 固定头部 -->
                      <header-title v-if="item.module == 'HeaderTitle'"  :dateFactory="item" :index="index" :diyData="CurriculumScheduleData"></header-title>
                      <!-- 首页input组件 -->
                      <search-input v-if="item.module == 'SearchInput'" :dateFactory="item" :index="index" :diyData="CurriculumScheduleData"></search-input>
                      <!-- 分类组件 -->
                      <classify-good  v-if="item.module == 'ClassifyGood'" :dateFactory="item" :index="index" :diyData="CurriculumScheduleData"></classify-good>
                      <!-- 课程列表 -->
                      <popular-courses-list v-if="item.module == 'PopularCoursesList'" :dateFactory="item" :index="index" :diyData="CurriculumScheduleData"></popular-courses-list>
                      <!-- 导航 -->
                      <!-- <nav-bar v-if="item.module == 'NavBar'" :dateFactory="item" :index="index" :diyData="CurriculumScheduleData"></nav-bar> -->
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {mapState} from 'vuex';
import draggable from "vuedraggable";
// 固定头部组件
import HeaderTitle from "@/components/HeaderTitle";
// input组件
import SearchInput from '@/components/SearchInput.vue';
// 分类商品
import ClassifyGood from '@/components/ClassifyGood';
// 课程列表
import PopularCoursesList from '@/components/PopularCoursesList';
import AsideMenu from '@/components/AsideMenu';

// 导航文档
// import NavBar from '@/components/NavBar';
export default {
  name: 'CurriculumSchedule',
  data() {
    return {
      allPageData: [],
      currentItemPage: {},
      drag: false,
      currentOptioned: '',
      path: this.$options.name,
      num: '',
      tabPosition: false,
      visible: false,
      percentage: 20,
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
    }
  },
  components: {
    draggable,
    SearchInput,
    ClassifyGood,
    HeaderTitle,
    PopularCoursesList,
    AsideMenu,
    // NavBar,
  },
  watch: {
    CurriculumScheduleData: {
      deep: true,
      handler(newValue,oldValue) {
 console.log(newValue,'四少',oldValue)
      }
    }
  },
  computed: {
    ...mapState({
      phoneSizes: state=> state.phoneSize,
      phoneSize: state => state.setting.phoneSize,
      bgColor: state => state.setting.bgColor,
      disabled: state => state.setting.disabled,
    }),
    eidtMode: {
      get() {
        return this.$store.state.setting.eidtMode;
      },
      set(value) {
         this.$store.dispatch('SettingChange', {eidtMode: value})
      }
    },
    CurriculumScheduleData: {
      get() {
        let CurriculumScheduleData = this.$store.state.CurriculumScheduleData;
       CurriculumScheduleData = CurriculumScheduleData.map((ele,index)=> {
         ele.id = index;
         return ele;
       })
        return this.$lodash.cloneDeep(CurriculumScheduleData);
      },
      set(value) {
        console.log('setsetsetsetsetset',value)
       this.$store.dispatch(this.$options.name + 'DataChange', {CurriculumScheduleData: value})
      }
    }
  },
  created() {
    console.log('CurriculumSchedulecreated')
    this.getAllData();
  },

  mounted() {
    console.log('Home')
    this.eventLine();
  },
  methods: {
    // 保存页面数据
    savePageJson() {
      this.axios.post('/interfaces/mini_apps/upd',{
        id: this.currentItemPage.id,
        json: JSON.stringify(this.CurriculumScheduleData)
      }).then((response)=> {
        if (response.data.code == 200) {
            this.$message({
            type: 'success',
            message: response.data.message,
          });
        } else {
          this.$message({
            type: 'info',
            message: response.data.message
          });      
        }
      })
    },
    // 获取JSON数据
    getAllData() {
      this.axios.post('/interfaces/mini_apps/get',{
        website_id: this.$route.params.website_id,
      }).then((response)=> {
        console.log(response.data.data,'datadata')
        this.$store.dispatch('diyAllDataChange', {allPageData: response.data.data})
        console.log('response',response)
        this.handleDataPage(response.data.data);
        this.allPageData = response.data.data;

      })
    },
    handleDataPage(allPageData) {
      allPageData.forEach((ele,index)=> {
        ele.data = ele.data.map((element,index)=> {
          if(ele.pageRouter == this.$options.name) {
            this.currentItemPage = ele;
          }
          element.id = index
          return element;
        })
        if (ele.pageRouter == this.$options.name) {
          this.$store.dispatch(this.$options.name + 'DataChange', {[this.$options.name + 'Data']: ele.data})
        }
       
      })
    },
    onMove(e){ 
      console.log(e.relatedContext.element, '移动的元素');
      if(e.relatedContext.element.forbid) return false;
      return true;
    }, 
    eventLine() {
      // 事件总线
      this.$EventBus.$on('diyFactoryCurriShe',(list)=> {
        console.log(list, 'list'); // 事件总线
        this.$store.dispatch(this.$options.name + 'DataChange', {CurriculumScheduleData: list})
      });
    },
    // 选中边框
    optionItemHadle(id) {
      this.CurriculumScheduleData = this.CurriculumScheduleData.map((ele)=> {
        if (ele.id == id) {
          this.currentOptioned = ele.module;
          ele.activeBorder = true;
        } else {
          ele.activeBorder = false;
        }
        return ele;
      })
    },
    handleChange() {
      console.log('边距')
    },
  
    optinPageJump() {

    },
    // 更换首页轮播风格
    goChanges(styleType) {
      console.log(this.CurriculumScheduleData, 'this.diyData')
      let index = this.CurriculumScheduleData.findIndex((ele)=> {
        return ele.id == 1;
      })
      this.CurriculumScheduleData[index].styleType = styleType;
     
    },
    optinPageSize(item) {
      console.log(this.$confirm, 'falfjal')
       this.$confirm(`确定要将画布切换为 ${parseInt(item.width)} x ${parseInt(item.height)} 吗？`)
          .then(() => {
            this.$store.dispatch('SettingChange', {phoneSize: item})
          })
          .catch((e) => console.log(e))
    },
  }
}
</script>
<style lang="less" scoped>
  .size-wrap {
    width: 320px;
    color: #fff;
    background-color: rgba(39,39,39,0.81);
    box-shadow: 0 2px 7px 1px #000;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
   
  }
  .phone-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .view-section {
    position: relative;
    border: 1px solid #e5e5e5;

  }
 
  section {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .content-wrap {
      flex: 1;
      // overflow-y: scroll;
    }
   
   
  }
  .view-section .rigth-option {
    position: absolute;
    left: 410px;
    top: 100px;
    width: 420px;
    padding: 12px 10px;
    background: #f8f8f8;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
    font-size: 12px;
    z-index: 5;
		.trangle {
			border-color: transparent;
			border-right-color: #e5e5e5;
			border-style: solid;
			border-width: 7px;
			height: 0;
			width: 0;
			position: absolute;
			left: -14px;
			top: 9px;
		}
    h1 {
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
      font-size: 12px;
      justify-content: space-between;
    }
    .layout-wrap {
      padding: 20px 0;
      .el-col-image {
        .el-row {
          display: flex;
          justify-content: space-between;
          .el-col  {
            border: 1px solid #e5e5e5;
            padding: 3%;
            box-sizing: border-box;
            background: #fff;
            cursor: pointer;
            &:hover {
              border-color: #38f;
            }
          }
        }
      }
    }
    .modeule-add-img-wrap {
      .title {
        display: flex;
        span {
          font-size: 13px;
        }
        
        p {
          color: #999;
          font-size: 12px;
        }
        
      }
      .el-row {
        margin-top: 8px;
        cursor: pointer;
        .el-col {
          margin-top: 10px;
          display: flex;
          align-items: center;
          padding: 15px;
          background: #fff;
          border: 1px dashed #e5e5e5;
          &:first-child {
            margin-top: 0;
          }
          .slider {
            flex: 1;
          }
          .el-input-number  {
            width: 90px;
          }
          .el-icon-delete-solid {
            cursor: pointer;
            position: absolute;
            font-size: 18px;
            top: 0;
            right: 0;
            transform: translate(50%,-50%);
            display: none;
            color: #999;
            &:hover {
              color: #000;
            }
          }
          &:hover {
            & > .el-icon-delete-solid {
              display: block;
            }
          }
          .left-img {
            width: 80px;
            height: 80px;
            position: relative;
            margin-right: 10px;
            .el-image {
              width: 100%;
              height: 100%;
            }
            .modify-image {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 80px;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              color: #fff;
              background: rgba(0,0,0,.5);
              cursor: pointer;
            }
          }
          .right-content {
            .img-title {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              span {
                width: 100px;
              }
            }
            .jump-add {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              margin-top: 18px;
              span {
                 width: 66px;
              }
              .el-dropdown {
                color: #38f;
              }
              .el-dropdown-link {
                cursor: pointer;
              }
            }
          }
        }
        .bg-add {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #38f;
          .muted{
            color: #999;
          }
        }
      }
    }

  }
  // hover
  
  .item {
    position: relative;
  }
  
  .mover:hover {
    position: relative;
    z-index: 100;
  }
  .mover::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    box-sizing: border-box;
    display: none;
    opacity: 1;
  }
  .mover {
    cursor: grab;
    // cursor: url('/img/hand1.ico');
  }
  .mover:hover::before {
    z-index: 2;
    display: block;
    border: 2px dashed #38f;
    opacity: 0.5;
    transition: all ease .3s;
  }
  .bordered::before{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    box-sizing: border-box;
    z-index: 200;
    display: block;
    border: 2px dashed #38f;
    transition: all ease .3s;
    opacity: 1;
  }
  .mover {
    .delete {
       display: none;
      position: absolute;
      top: -10px;
      right: -10px;
      z-index: 15;
      font-size: 0;
      line-height: 0;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
      }
    }
    .diy-option-prepend {
      position: absolute;
      left: 0;
      z-index: 10;
      width: 100%;
      top: 0px;
      display: none;
      top: 1px;
      .add-maker {
        position: absolute;
        left: 0;
        bottom: -4px;
        justify-content: center;
        align-items: center;
        width: 100%;
        z-index: 4;
        display: flex;
        .circle {
          border: 1px solid #59f;
          border-radius: 50%;
          width: 10px;
          height: 10px;
          display: inline-block;
          z-index: 1;
          background: #fff;
        }
        .line {
          background: #59f;
          height: 1px;
          width: 100%;
        }
      }
      a {
        position: absolute;
        right: 50%;
        margin-right: -8px;
        top: -9px;
        z-index: 5;
        font-size: 0;
        line-height: 0;
        width: 17px;
        height: 17px;
        display: inline-block;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .diy-option-append {
      position: absolute;
      left: 0;
      z-index: 10;
      width: 100%;
      display: none;
      bottom: 0;
      .add-maker {
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        z-index: 4;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        z-index: 4;
        display: flex;
        .circle {
          border: 1px solid #59f;
          border-radius: 50%;
          width: 10px;
          height: 10px;
          display: inline-block;
          z-index: 1;
          background: #fff;
        }
        .line {
          background: #59f;
          height: 1px;
          width: 100%;
        }
      }
      a {
       position: absolute;
        right: 50%;
        margin-right: -8px;
        top: -9px;
        z-index: 5;
        font-size: 0;
        line-height: 0;
        width: 17px;
        height: 17px;
        display: inline-block;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    &:hover {
      .diy-option-append,.diy-option-prepend,.delete {
        display: block;
      }
    }
  }
  .forbid {
    cursor: pointer !important;
    .diy-option-append,.diy-option-prepend,.delete {
        display: none;
      }
  }
  .el-rows {
    display: flex;
  }
  .el-rows .left-contt {
    h5 {
      font-size: 19px;
      color: #fff;
      margin: 0;
      margin-top: 10px;
    }
    width: 200px;
    height: 100vh;
    background: rgb(84, 92, 100);
  }
  .right-con {
    margin-left: 80px;
  }

</style>


